<!DOCTYPE html>
<html lang="en">
<head>
    #include("../include/header.html")
    <link href="/static/ajax/libs/jsoneditor/9.1.5/jsoneditor.min.css" rel="stylesheet">
    <script src="/static/ajax/libs/jsoneditor/9.1.5/jsoneditor.min.js"></script>
</head>
<body>

<div class="container">
    #include("../include/menu.html")

    <div class="row" style="margin-bottom: 10px">
        <div class="col-sm-12" style="margin:10px 0;">
            <div class="btn-toolbar" role="toolbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-info" onclick="beautifySQL()">Beautify SQL</button>
                    <button type="button" class="btn btn-success" onclick="minifySQL()">Minify SQL</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6" style="margin:10px 0;">
            <textarea onchange="change()" style="width: 100%;resize: none;height: 600px">{"Array":[1,2,3],"Boolean":true,"Null":null,"Number":123,"Object":{"a":"b","c":"d"},"String":"Hello World"}</textarea>
        </div>
        <div class="col-sm-6 pull-right" style="margin:10px 0;">
            <!-- begin code -->
            <div id="jsoneditor" style=" height: 600px;"></div>
            <!-- end code-->
        </div>
    </div>
</div>

#include("../include/footer.html")

<script>
    //https://www.cnblogs.com/handk/p/4766271.html
    // create the editor
    const container = document.getElementById("jsoneditor")
    const options = {
        theme: 'bootstrap3',
        onValidationError: function (errors) {
            if (errors && errors.length > 0) {
                toastr.error(errors);
            }
        }
    }
    const editor = new JSONEditor(container, options);

    // set json
    const initialJson = {
        "Array": [1, 2, 3],
        "Boolean": true,
        "Null": null,
        "Number": 123,
        "Object": {"a": "b", "c": "d"},
        "String": "Hello World"
    }
    editor.set(initialJson)

    // get json
    const updatedJson = editor.get();
    console.log(updatedJson);
    editor.expandAll();

    function change() {
        try {
            var val = this.event.target.value;
            editor.set(JSON.parse(val))
        } catch (error) {
            console.log(error);
            editor.set({error: error + ''});
        }
        editor.expandAll();
    }
</script>
</body>
</html>